<template>
  <div class="projection_page itemScrollWrapper" id="prijectionPoin">
    <div class="form_title">投影</div>
    <div class="radio_box">
      <el-radio-group
        @change="handAll"
        :value="value.select.type"
        @input="
          $emit('input', {
            ...value,
            select: { ...value.select, type: $event },
          })
        "
      >
        <el-radio :label="'ALL'">所有属性</el-radio>
        <el-radio :label="'USER_DEFINED'">用户自定义属性</el-radio>
      </el-radio-group>
    </div>
    <!-- 用户自定义属性 -->
    <UserInput
      :objKey="objKey"
      :value="value"
      @input="$emit('input', $event)"
      :attributeList="attributeList"
      v-show="value.select.type === 'USER_DEFINED'"
    ></UserInput>
    <!-- 分组 -->
    <!-- v-model="formChk" -->
    <Grouping
      @changeInputValue="changeInputValue"
      :extensionsLR="extensionsLR"
      :value="value"
      @input="$emit('input', $event)"
      @changeGrop="changeGrop"
      @handAddGroup="handAddGroup"
      @handDelGroup="handDelGroup"
      :inputList="inputList"
      :objKey="objKeyFilter"
    ></Grouping>
  </div>
</template>

<script>
import UserInput from "./UserInput";
import Grouping from "./Grouping.vue";
import { generateId } from "@/utils/index";
export default {
  props: {
    // 默认值(其实是拼接好的数据--groupBy ["f1", 'f2', 'f3'])
    value: { required: true },
    objKey: { type: String, default: "funArr" },
    objKeyFilter: { type: String, default: "funArrAll" },
    extensionsLR: { type: Array, default: () => [] },
    attributeList: {
      type: Array,
      default: () => [],
    },
    sourceCellAttributeList: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    // 默认值
    value: {
      handler: function (newValue, oldData) {
        if (newValue.groupBy && newValue.groupBy.length !== 0) {
          this.inputList = [];
          this.formChk.attrChecked = true;
          newValue.groupBy.forEach((item) => {
            this.inputList.push({
              id: generateId(),
              name: item,
              attributeList: this.attributeList,
            });
          });
          // console.log(this.inputList, "this.inputList");
        }

        // this.inputList.for
      },
      immediate: true,
      deep: true,
    },
  },
  components: {
    UserInput,
    Grouping,
  },
  data() {
    return {
      formChk: {
        attrChecked: false, //按属性分组
        checkedFilter: true, //过滤分组
        having: "", //过滤内容
      },
      filterFun: "",
      inputList: [
        { id: generateId(), name: "", attributeList: this.attributeList },
      ],
      radio: 1,
    };
  },

  methods: {
    changeInputValue() {
      this.$emit("changeInputValue");
    },
    handAll() {},
    handDelGroup(i) {
      this.inputList.splice(i, 1);
      this.setModel();
    },
    // 设置默认值(双向绑定)
    setModel() {
      const groupBy = this.inputList.map((item) => {
        return item.name;
      });
      if (groupBy && groupBy.length == 1 && groupBy[0] == "") {
        return;
      }
      this.$emit("input", { ...this.value, ...{ groupBy } });
    },
    changeGrop(val) {
      this.setModel();
    },
    handAddGroup(attrLength) {
      if (this.inputList.length >= attrLength) {
        this.$msg("超出属性,不可添加!");
        return;
      }
      this.inputList.push({
        id: generateId(),
        name: "",
        attributeList: this.attributeList,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.projection_page {
  margin-top: 10px;
  .radio_box {
  }
}
</style>